<script setup lang="ts">
  import { useMeta } from 'quasar'
  useMeta({ title: '租房信息调查统计' })
  import { ref, onMounted } from 'vue'
  import { api } from 'boot/axios'
  import type { IQColumns, TQRows } from '@/composables/useQTable'

  const columns: IQColumns = [
    { name: 'name', label: '姓名', field: 'name', align: 'left' },
    { name: 'phone', label: '电话', field: 'phone', align: 'left' },
    { name: 'queryArea', label: '意向区域', field: 'queryArea', align: 'left' },
    { name: 'houseType', label: '几房房源', field: 'houseType', align: 'left' },
    { name: 'areaRange', label: '意向面积', field: 'areaRange', align: 'left' },
    { name: 'budgetRange', label: '预算范围', field: 'budgetRange', align: 'left' },
    { name: 'orientation', label: '理想朝向', field: 'orientation', align: 'left' },
    { name: 'floorRange', label: '理想楼层', field: 'floorRange', align: 'left' },
    { name: 'isShared', label: '是否介意楼龄', field: 'isShared', align: 'left' },
    { name: 'viewingTime', label: '方便看房时间', field: 'viewingTime', align: 'left' }
  ]
  const pagination = ref({
    sortBy: 'desc',
    descending: false,
    page: 1,
    rowsPerPage: 10
  })
  const totalRef = ref(0)
  const rows = ref<TQRows>([])
  let curPage = 1
  let pageSize = 10
  let totalPages = 1
  function getTableList(page: number, size: number) {
    const params = { page, size }
    api
      .get('/house/survey-form/page', { params })
      .then((res: any) => {
        if (res.status === 200 && res.data) {
          // const { total, size, pages, current, records } = res.data
          const { total, records, pages } = res.data
          rows.value = records || []
          totalRef.value = total
          totalPages = pages
        }
      })
      .catch(() => {
        // console.log('get data error')
      })
  }
  onMounted(() => {
    getTableList(curPage, pageSize)
  })
  function onUpdatePage(np: any) {
    pagination.value = np
    // console.log(np, 'np')
    curPage = np.page
    pageSize = np.rowsPerPage
    getTableList(curPage, pageSize)
  }
  function onFirstPage() {
    // scope.firstPage()
    curPage = 1
    getTableList(curPage, pageSize)
  }
  function onPrevPage() {
    // scope.prevPage()
    if (curPage - 1 < 1) {
      return
    }
    curPage -= 1
    getTableList(curPage, pageSize)
  }
  function onNextPage() {
    // scope.nextPage()
    if (curPage + 1 > totalPages) {
      return
    }
    curPage += 1
    getTableList(curPage, pageSize)
  }
  function onLastPage() {
    // scope.lastPage()
    curPage = totalPages
    getTableList(curPage, pageSize)
  }
</script>

<template>
  <q-page class="bg-[#FAFCFF] p-5">
    <div class="bg-white p-5">
      <q-table
        title=" "
        flat
        wrap-cells
        separator="cell"
        table-class="ud-table"
        :rows-per-page-options="[10, 20, 30, 50, 100, 150, 200]"
        @update:pagination="onUpdatePage"
        :rows="rows"
        :columns="columns"
        :pagination="pagination"
        row-key="name">
        <template v-slot:pagination>
          <span>总数：{{ totalRef }}</span>
          <q-btn icon="first_page" color="grey-8" round dense flat @click="onFirstPage" />

          <q-btn icon="chevron_left" color="grey-8" round dense flat @click="onPrevPage" />

          <q-btn icon="chevron_right" color="grey-8" round dense flat @click="onNextPage" />

          <q-btn icon="last_page" color="grey-8" round dense flat @click="onLastPage" />
        </template>
      </q-table>
    </div>
  </q-page>
</template>

<style scoped></style>
